import React from "react";
import Tab from "../../common/Tab";

const Index = () => {

    // 获取登录信息
    let Auth = React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {}

    // 定义状态
    const [LoginAuth, setLoginAuth] = React.useState(Auth)

    const [count, setCount] = React.useState({
        ProductCount: 0,
        OrderCount: 0,
        CollCount: 0
    })

    // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // Hook
    React.useEffect(() => {
        // let LoginAuth = React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {}

        // setLoginAuth(LoginAuth)

        getCountData()
    }, [])

    const getCountData = async () => {
        let result = await React.$Api.BaseIndex({ busid: LoginAuth.id })

        if (result.code === 1) {
            setCount(result.data)
        }

    }

    // 去登录页方法
    const ToLogin = () => {
        navigate('/business/base/login')
    }

    // 退出登录
    const onLogout = () => {
        React.$Vant.Dialog.confirm({
            message: "确认退出登录？",
        })
            .then(() => {
                React.$Vant.Toast({
                    type: 'success',
                    message: '退出成功',
                    onClose: () => {
                        // 删除Cookies path：路径
                        React.$Cookies.remove('LoginAuth', { path: '/' })

                        Auth = {}

                        setCount({
                            ProductCount: 0,
                            OrderCount: 0,
                            CollCount: 0
                        })

                        // 重新赋值一个空的对象
                        setLoginAuth({})
                    }
                })
            })
            .catch(() => {
            })
    }

    // 头像
    const Avatar = () => {
        if (LoginAuth.avatar) {
            return (
                <div className="toux_hou">
                    <img id="Dfgrg" style={{ height: '1.1rem' }} src={LoginAuth.avatar_cdn} alt="" />
                </div>
            )
        } else {
            return (
                <div className="toux_hou">
                    <img id="Dfgrg" style={{ height: '1.1rem' }} src="/assets/images/toux.jpg" alt="" />
                </div>
            )
        }
    }

    // 显示昵称
    const NickName = () => {
        if (JSON.stringify(LoginAuth) !== '{}') {
            if (LoginAuth.nickname) {
                return (
                    <>
                        <h2>{LoginAuth.nickname}</h2>
                    </>
                )
            } else {
                return (
                    <>
                        <h2>{LoginAuth.mobile_text}</h2>
                    </>
                )
            }
        } else {
            return (
                <h2>
                    <React.$Vant.Button round='true' hairline color='#b775ab' type='primary' onClick={ToLogin}>
                        立即登录
                    </React.$Vant.Button>
                </h2>
            )
        }
    }

    const Logout = () => {
        if (JSON.stringify(LoginAuth) !== '{}') {
            return (
                <div className="my_dind">
                    <div className="bt">
                        <a onClick={onLogout}>
                            <h3><img src="/assets/images/my_x_01.png" />退出登录</h3>
                            <div className="right">
                                <img src="/assets/images/right_jiant.png" />
                            </div>
                        </a>
                    </div>
                </div>
            )
        }
    }

    const Email = () => {
        if (LoginAuth.auth == 0) {
            return (
                <div className="my_dind">
                    <div className="bt">
                        <React.$Router.NavLink to="/business/base/email">
                            <h3>
                                <img src="/assets/images/my_x_01.png" />
                                邮箱认证
                            </h3>
                            <div className="right">
                                <img src="/assets/images/right_jiant.png" />
                            </div>
                        </React.$Router.NavLink>
                    </div>
                </div>
            )
        }
    }

    return (
        <>
            <div className="my_kuang">

                {/* 显示头像 */}
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        {/* 头像组件 */}
                        <Avatar />

                        {/* 昵称 */}
                        <div className="mingz">
                            <NickName />
                        </div>
                    </div>
                </div>

                <div className="div_bx_k">
                    <div className="neir_Ef">
                        <div className="yverjif">
                            <ul>
                                <li>
                                    <React.$Router.NavLink to={`/business/base/collection?action=product`}>
                                        <h2>{count.ProductCount}</h2>
                                        <p>收藏商品</p>
                                    </React.$Router.NavLink>
                                </li>
                                <li>
                                    <React.$Router.NavLink to={`/order/order/index`}>
                                        <h2>{count.OrderCount}</h2>
                                        <p>订单</p>
                                    </React.$Router.NavLink>
                                </li>
                                <li>
                                    <React.$Router.NavLink to={`/business/base/collection?action=category`}>
                                        <h2>{count.CollCount}</h2>
                                        <p>收藏文章</p>
                                    </React.$Router.NavLink>
                                </li>
                            </ul>
                        </div>

                        <div className="list_index_my">
                            <div className="fenh_ziyek">
                                <h3>更多服务 </h3>
                            </div>
                            <div className="my_dind">
                                <div className="bt">
                                    <React.$Router.NavLink to="/business/base/profile">
                                        <h3>
                                            <img src="/assets/images/my_x_01.png" />
                                            基本资料
                                        </h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" />
                                        </div>
                                    </React.$Router.NavLink>
                                </div>
                            </div>
                            <Email />
                            <div className="my_dind">
                                <div className="bt">
                                    <React.$Router.NavLink to="/business/feedback">
                                        <h3><img src="/assets/images/my_x_01.png" />意见反馈</h3>
                                        <div className="right">
                                            {/* <!-- <span><b>450.00</b>元</span> --> */}
                                            <img src="/assets/images/right_jiant.png" />
                                        </div>
                                    </React.$Router.NavLink>
                                </div>
                            </div>
                            <div className="my_dind">
                                <div className="bt">
                                    <React.$Router.NavLink to="/business/about">
                                        <h3><img src="/assets/images/my_x_02.png" />关于我们</h3>
                                        <div className="right">
                                            {/* <!-- <span><b>300</b>分</span> --> */}
                                            <img src="/assets/images/right_jiant.png" />
                                        </div>
                                    </React.$Router.NavLink>
                                </div>
                            </div>
                            <Logout />
                        </div>
                        <div style={{ height: '0.9rem' }}></div>
                    </div>

                </div>
            </div>

            <div style={{ height: '.75rem' }}></div>

            <Tab />

        </>
    )
}

export default Index